<template>
  <div>
    {{ getLabel(currentOptions, value!) }}
  </div>
</template>

<script setup lang="ts">
import { optionsList } from '@/data/system.options';
import type { SYSTEM_OPTION_TYPE } from '@/enum/system';
import { translateOptions } from '@/utils/common/common';
import { getLabel } from '@/utils/common/utils';
import type { LabeledValue } from 'ant-design-vue/es/select';

const currentOptions = ref<LabeledValue[]>([]);
const props = defineProps<{
  option: SYSTEM_OPTION_TYPE;
  value?: string | number;
}>();

watch(
  props,
  () => {
    optionsList.forEach(e => {
      if (e.key === props.option) {
        currentOptions.value = translateOptions(e.options);
      }
    });
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped></style>
